<template>
  <div class="WaterelectReportbox">
    <div class="topbox">
      <el-form ref="form" label-width="80px" label-position="left">
        <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item label="用电企业">
              <FilterSelect ref="yongdianqiye" 
              :optionlist="yonghulist" 
              :valuekey="{name:'name',value:'id'}" 
              @changeselect="changecompany" 
              :defaultvalue="companyId"
              ></FilterSelect>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="日期">
              <el-date-picker style="width: 100%;" v-model="value1" size="small" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="5" style="margin-top: 4px;">
            <el-button type="primary" size="small" @click="handlePrevDay">上一日</el-button>
            <el-button type="primary" size="small" @click="handleNextDay">下一日</el-button>
          </el-col>
          <el-col :span="9" style="text-align: right;">
            <el-form-item label="">
              <el-button size="small" @click="chongzhi">重 置</el-button>
              <el-button type="primary" size="small" @click="gettablelist()">查 询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="bodybox">
      <div class="TopTile">
        <div>
          <span class="danxuan" :class="CheckType == 'elect' ? 'active' :''" @click="clicktype('elect')">电量</span>
          <span class="danxuan" :class="CheckType == 'water' ? 'active' :''" @click="clicktype('water')">水量</span>
          <span class="danxuan" :class="CheckType == 'steam' ? 'active' :''" @click="clicktype('steam')">气量</span>
        </div>
        <TopTile  @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile>
      </div>
      <div class="tablebox">
        <TableColumn
         ref="tablecolumn"
         :issize="issize"
         :tableData="tableData"
         :tableConfig="tableConfig" >
         <el-table-column
            prop="deviceName"
            label="设备"
            v-if="tableData.length"
            fixed
            width="150">
          </el-table-column>
         <el-table-column
            v-for="(item,index) in pointlist"
            :key="index"
            :prop="item"
            :label="item+' 时'"
            align="right"
            width="180">
          </el-table-column>
        </TableColumn>
      </div>
    </div>
  </div>
</template>

<script>
import FilterSelect from '@/components/FilterSelect'
import request from '@/utils/request'
import moment from 'moment';
import {exportexcel} from '@/utils/excel'
import TopTile from '@/components/TopTitle/index.vue'
import { getyongdianlistapi } from '@/api/energy-consumption/Basic-information/medium'
import TableColumn from '@/components/Table/index.vue'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTile,
    TableColumn,
    FilterSelect
  },
  data() {
    return {
      value1:'',
      companyId: '',
      issize: 'medium',
      yonghulist: [],
      activeName: 'first',
      CheckType: 'elect',
      tableData: [],
      tableConfig: [],
      pointlist:[]
    };
  },

  async mounted() {
    this.gettime()
    // 获取用电单位
    const { data: { list } } = await getyongdianlistapi()
    this.yonghulist = list
    const companyId = localStorage.getItem('companyId')
    this.$set(this,'companyId',companyId?+companyId:list[0].id)
    this.gettablelist()
  },

  methods: {
    // 获取表格数据
    async gettablelist() {
      this.$refs.tablecolumn.loading=true
      const { data: { list } } = await request.get(`ecm-microservice-biz/ecm/building/device/energy/list?companyId=${this.companyId}&dateString=${this.value1}&dateType=${this.CheckType == 'elect' ? '1' : this.CheckType == 'water' ? '2' : '3'}`)
      this.pointlist = list.find(ele => ele.valueVOList.length)?.valueVOList.map(item => item.time)
      list.forEach(ele => {
        ele.valueVOList.map(item => {
           ele[item.time]=item.value
        })
      });
      this.tableData = list
      this.$nextTick(()=>this.$refs.tablecolumn.$refs.table.doLayout())
      this.$refs.tablecolumn.loading=false
    },
    // 类型切换
    clicktype(val) {
      this.CheckType = val
      this.gettablelist()
    },
    // 获取上一日日期
    handlePrevDay() {
      this.value1 = moment(this.value1).subtract(1, 'days').format('YYYY-MM-DD');
    },
    // 获取下一日日期
    handleNextDay() {
      this.value1 = moment(this.value1).add(1, 'days').format('YYYY-MM-DD');
    },
    // 调节表格密度
    command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 企业下拉
    changecompany(val) {
      this.$set(this,'companyId',val)
      localStorage.setItem('companyId', val)
    },
    //重置
    chongzhi() {
      const companyId = localStorage.getItem('companyId')
      this.$set(this,'companyId',companyId?+companyId:this.yonghulist[0].id)
      this.gettime()
      this.gettablelist()
    },
    // 导出
    daochu() {
      exportexcel('ecm-microservice-biz/ecm/building/device/energy/exportExcel',{
        dateString:this.value1,companyId:this.companyId,dateType:this.CheckType == 'elect' ? '1' : this.CheckType == 'water' ? '2' : '3'
      },'设备能耗')
    },
    // 刷新列表
    shuaxin() {
      this.gettablelist()
      this.$message.success('列表刷新成功')
    },
    // 获取当前时间戳
    gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month=mon<10?'0'+mon:mon
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      this.value1=year+'-'+month+'-'+day
    },
  },
};
</script>

<style lang="scss" scoped>
.WaterelectReportbox{
  height: 100%;
  padding: 10px;
  .topbox{
    height: 80px;
    padding: 20px;
    margin-bottom: 10px;
    background-color: #fff;
  }
  .bodybox{
    height: calc(100% - 90px);
    padding: 20px;
    background-color: #fff;
    position: relative;
    .TopTile{
      // position: absolute;
      // right: 20px;
      // top: 20px;
      display: flex;
      justify-content: space-between;
      .danxuan{
        display: inline-block;
        margin-right: 30px;
        cursor: pointer;
        padding-bottom: 5px;
      }
      .danxuan:hover{
        color: #409eff;
        border-bottom: 2px solid #409eff;
      }
      .active{
        color: #409eff;
        border-bottom: 2px solid #409eff;
      }
    }
    .tablebox{
      height: 94%;
      margin-top: 10px;
    }
  }
}

::v-deep .el-tabs__nav-wrap::after {
    height: 0px;
}
::v-deep .el-tabs{
  height: 100%;
}
::v-deep .el-tabs__content{
  height: 92%;
}
::v-deep .el-tab-pane{
  height: 100%;
}
</style>